<!-- 注意这里不需要写`<html><body>`这些东西，它是一个html片段，不是完整的html页面 -->
<form id="addOrUpdateForm" lay-filter="addOrUpdateForm" class="layui-form model-form">
    <div class="layui-col-md12">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>基本信息</legend>
        </fieldset>
    </div>
    <div class="layui-col-md6">
        <input name="driverIndex" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">姓名</label>
            <div class="layui-input-block">
                <input name="employeeName" class="layui-input" placeholder="请输入姓名" lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">性别</label>
            <div class="layui-input-block">
                <div id="sexBox"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">身份证</label>
            <div class="layui-input-block">
                <input name="idCard" class="layui-input" placeholder="请输入手机号" lay-verType="tips" lay-verify="required|identityX" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">备用号</label>
            <div class="layui-input-block">
                <input name="backupPhone" class="layui-input" placeholder="请输入手机号" lay-verType="tips" lay-verify="phoneX" />
            </div>
        </div>




    </div>
    <div class="layui-col-md6">

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">工号</label>
            <div class="layui-input-block">
                <input name="employeeCode" class="layui-input" placeholder="请输入工号" lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">类型</label>
            <div class="layui-input-block">
                <div id="typeBox"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">手机号</label>
            <div class="layui-input-block">
                <input name="phone" class="layui-input" placeholder="请输入手机号" lay-verType="tips" lay-verify="required|phoneX" required/>
            </div>
        </div>



    </div>


    <div class="layui-col-md12" style="margin-bottom: 20px;">
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>保存</button>
        </div>
    </div>
</form>

<!-- 表格操作列 -->
<script type="text/html" id="extTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="extEdit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="extDelete">删除</a>
</script>

<script>
    layui.use(['layer', 'form', 'admin', 'table', 'tableX', 'xnUtil', 'xmSelect', 'laydate'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let table = layui.table;
        let tableX = layui.tableX;
        let admin = layui.admin;
        let xnUtil = layui.xnUtil;
        let xmSelect = layui.xmSelect;
        let laydate = layui.laydate;

        let editData = admin.getLayerData('#addOrUpdateForm').data;


        // 渲染性别字典下拉
        let sexDataRenderIns = xmSelect.render({
            el: '#sexBox',
            name: 'sex',
            data: xnUtil.getDictDataByDictTypeCode('sex', null),
            layVerify: 'required',
            layVerType: 'tips',
            radio: true,
            clickClose: true,
            model: { icon:'hidden', label: { type: 'text' }},
            prop: {
                name: 'name',
                value: 'code'
            },
            tips: '请选择性别'
        });


        // 渲染类型字典下拉
        let typeDataRenderIns = xmSelect.render({
            el: '#typeBox',
            name: 'type',
            data: xnUtil.getDictDataByDictTypeCode('driver_type', null),
            layVerify: 'required',
            layVerType: 'tips',
            radio: true,
            clickClose: true,
            model: { icon:'hidden', label: { type: 'text' }},
            prop: {
                name: 'name',
                value: 'code'
            },
            tips: '请选择类型'
        });

        //数据不为空，则回显
        if(editData !== null && editData !== undefined) {
            form.val('addOrUpdateForm', editData);
            sexDataRenderIns.setValue([editData.sex]);
            typeDataRenderIns.setValue([editData.type]);
        }



        // 表单提交事件
        form.on('submit(formSubmitBtn)', function (data) {
            layer.load(2);
            let url = editData ? getProjectUrl() + 'sysDriver/edit' : getProjectUrl() + 'sysDriver/add';
            admin.req(url, JSON.stringify(data.field), function(res){
                layer.msg(res.message, {icon: 1, time: 1000}, function () {
                    admin.putLayerData('formOk', true, '#addOrUpdateForm');
                    admin.closeDialog('#addOrUpdateForm');
                });
            }, 'post');
            return false;
        });

    });
</script>